<template>
  <div class="page">
    <div class="header">
      <van-nav-bar title="My AD" />
    </div>
    <div class="content">
      <div class="type-box">
        <div
          class="type-box-item"
          :class="{ activeTypeBg: mode == 1 }"
          @click="handleClickAD"
        >
          Actived ADs {{ releaseList.length }}
        </div>
        <div
          class="type-box-item"
          :class="{ activeTypeBg: mode == 2 }"
          @click="handleClickDF"
        >
          draft box {{ draftList.length }}
        </div>
      </div>
      <!-- Actived ADs -->
      <div v-if="mode == 1" class="active-adBox">
        <!-- <div>筛选TODO</div> -->
        <div
          class="active-item"
          v-for="(item, index) in releaseList"
          :key="index"
        >
          <div class="item-head">
            <span class="location-title"
              >{{ index + 1 + ' ' + translateDict(item.category) }}
              <!-- -{{ item.city }} -->
            </span>
            <span class="expire-date">Expire date: {{ item.expireDate }}</span>
          </div>
          <div class="show-box">
            <div class="show-box-item1">
              <img :src="item.imagesOne" alt="" />
            </div>
            <div class="show-box-item1">
              <img :src="item.imagesTwo" alt="" />
            </div>
            <div class="show-box-item1">
              <img :src="item.imagesThree" alt="" />
            </div>
            <div class="show-box-item2">
              <div class="rg-item1" @click="goEdit(item.advertisementId)">
                <div class="rg-item1-lf">edit</div>
                <img
                  class="rg-img1"
                  src="../../assets/images/myAds/edit.png"
                  alt=""
                />
              </div>
              <div class="rg-item2" @click="Goto_detail(item)">
                <div class="rg-item2-lf">preview</div>
                <img
                  class="rg-img2"
                  src="../../assets/images/myAds/see.png"
                  alt=""
                />
              </div>
              <div class="rg-item3" @click="showMsgPopup(item.advertisementId)">
                <div class="rg-item3-lf">New message</div>
                <img
                  class="rg-img3"
                  src="../../assets/images/myAds/msg.png"
                  alt=""
                />
                <div class="qes-box">
                  <img
                    @click.stop="showMsgQuestionPopup"
                    class="ques-img"
                    src="../../assets/images/myAds/ques-icon.png"
                    alt=""
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="upgrade-box">
            <!-- <div class="upgrade-lf">
              <div class="upgrade-lf-item">
                <div>Top AD</div>
                <div>
                  Expire date: <br />
                  {{ item.topExpireDate }}
                </div>
              </div>
              <div class="upgrade-lf-item">
                <div>Recommended ad</div>
                <div>
                  Expire date: <br />
                  {{ item.recommendExpireDate }}
                </div>
              </div>
            </div> -->
            <div>
              <div class="upgrade-small-box">
                <div class="rg-box1">
                  <div
                    class="rg-box1-flex"
                    @click="handleUpgradeSelect(item, index)"
                  >
                    <div>upgrade</div>
                    <img
                      class="bottom-img"
                      src="../../assets/images/myAds/bottom-icon.png"
                      alt=""
                    />
                  </div>
                  <div class="rg-box-select" v-if="upgradeChecked === index">
                    <template v-if="item.type != 3">
                      <div class="upgrade-title">Top AD</div>
                      <van-radio-group v-model="topRadio">
                        <van-cell-group>
                          <van-cell
                            class="state-cell"
                            v-for="item in gainCustomersList"
                            clickable
                            :key="item.dictValue"
                            :title="item.dictLabel"
                            @click="topRadio = item.dictValue"
                          >
                            <template #right-icon>
                              <van-radio
                                icon-size="20px"
                                checked-color="#273458"
                                :name="item.dictValue"
                              />
                            </template>
                          </van-cell>
                        </van-cell-group>
                      </van-radio-group>
                    </template>
                    <template v-if="item.type != 2">
                      <div class="upgrade-title">Recommended AD</div>
                      <van-radio-group v-model="recommendedRadio">
                        <van-cell-group>
                          <van-cell
                            class="state-cell"
                            v-for="item in gainCustomersList"
                            clickable
                            :key="item.dictValue"
                            :title="item.dictLabel"
                            @click="recommendedRadio = item.dictValue"
                          >
                            <template #right-icon>
                              <van-radio
                                icon-size="20px"
                                checked-color="#273458"
                                :name="item.dictValue"
                              />
                            </template>
                          </van-cell>
                        </van-cell-group>
                      </van-radio-group>
                    </template>
                    <div class="price-box">价格{{ draftMoney }}</div>
                    <div class="ok-btn" @click="handleUpgrade">OK</div>
                  </div>
                  <div class="qes-box">
                    <img
                      @click.stop="showUpgradeQuestionPopup"
                      class="ques-img"
                      src="../../assets/images/myAds/ques-icon.png"
                      alt=""
                    />
                  </div>
                </div>
                <div class="rg-box2">
                  <div
                    class="rg-box1-flex"
                    @click="handleCustomersSelect(item, index)"
                  >
                    <div>buy ads dispaly time</div>
                    <img
                      @click.stop="showCustomersQuestionPopup"
                      class="bottom-img"
                      src="../../assets/images/myAds/bottom-icon.png"
                      alt=""
                    />
                  </div>
                  <div class="rg-box-select" v-if="customersChecked === index">
                    <van-radio-group v-model="customersRadio">
                      <van-cell-group>
                        <van-cell
                          class="state-cell"
                          v-for="item in gainCustomersList"
                          clickable
                          :key="item.dictValue"
                          :title="item.dictLabel"
                          @click="customersRadio = item.dictValue"
                        >
                          <template #right-icon>
                            <van-radio
                              icon-size="20px"
                              checked-color="#273458"
                              :name="item.dictValue"
                            />
                          </template>
                        </van-cell>
                      </van-cell-group>
                    </van-radio-group>
                    <div class="ok-btn" @click="handleCustomers">OK</div>
                  </div>
                  <div class="qes-box">
                    <img
                      class="ques-img"
                      src="../../assets/images/myAds/ques-icon.png"
                      alt=""
                    />
                  </div>
                </div>
                <div class="rg-box1">
                  <div class="rg-box1-flex" @click="deleteAd(item, index)">
                    <div>delete</div>
                    <img
                      class="delete-img"
                      src="../../assets/images/myAds/delete.png"
                      alt=""
                    />
                  </div>
                </div>
              </div>
              <!-- <div class="upgrade-text">
                  Expire date: <br />
                  {{ item.expireDate }}
                </div> -->
            </div>
            <div class="expire-time">
              <div>Advertising duration</div>
              <div>Expire date:{{ item.createTime }}</div>
            </div>
            <div class="expire-time">
              <div>Recommended ad</div>
              <div>Expire date:{{ item.recommendExpireDate }}</div>
            </div>
            <div class="expire-time">
              <div>Top AD</div>
              <div>Expire date: {{ item.topExpireDate }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- draft box -->
      <div v-if="mode == 2" class="draft-adBox">
        <div class="draft-item" v-for="(item, index) in draftList" :key="index">
          <div class="item-head">
            <!-- <span class="location-title"
              >{{ item.category }}-{{ item.city }}</span
            > -->
            <span class="location-title"
              >{{ index + 1 + ' ' + translateDict(item.category) }}
              <!-- -{{ item.city }} -->
            </span>
            <span class="ad-fee">广告费用$:{{ item.advertisementMoney }}</span>
          </div>
          <div class="show-box">
            <div class="show-box-item1">
              <img :src="item.imagesOne" alt="" />
            </div>
            <div class="show-box-item1">
              <img :src="item.imagesTwo" alt="" />
            </div>
            <div class="show-box-item1">
              <img :src="item.imagesThree" alt="" />
            </div>
            <div class="show-box-item2">
              <div class="rg-item1" @click="goEdit(item.advertisementId)">
                <div class="rg-item1-lf">edit</div>
                <img
                  class="rg-img1"
                  src="../../assets/images/myAds/edit.png"
                  alt=""
                />
              </div>
              <div class="rg-item2" @click="Goto_detail(item)">
                <div class="rg-item2-lf">preview</div>
                <img
                  class="rg-img2"
                  src="../../assets/images/myAds/see.png"
                  alt=""
                />
              </div>
              <div class="rg-item3" @click="showMsgPopup(item.advertisementId)">
                <div class="rg-item3-lf">New message</div>
                <img
                  class="rg-img3"
                  src="../../assets/images/myAds/msg.png"
                  alt=""
                />
                <div class="qes-box">
                  <img
                    @click.stop="showMsgQuestionPopup"
                    class="ques-img"
                    src="../../assets/images/myAds/ques-icon.png"
                    alt=""
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="upgrade-small-box1">
            <div class="rg-box1">
              <div
                class="rg-box1-flex"
                @click="handleUpgradeSelect(item, index)"
              >
                <div>upgrade</div>
                <img
                  class="bottom-img"
                  src="../../assets/images/myAds/bottom-icon.png"
                  alt=""
                />
              </div>
              <div class="rg-box-select" v-if="upgradeChecked === index">
                <template v-if="item.type != 3">
                  <div class="upgrade-title">Top AD</div>
                  <van-radio-group v-model="topRadio">
                    <van-cell-group>
                      <van-cell
                        class="state-cell"
                        v-for="item in gainCustomersList"
                        clickable
                        :key="item.dictValue"
                        :title="item.dictLabel"
                        @click="topRadio = item.dictValue"
                      >
                        <template #right-icon>
                          <van-radio
                            icon-size="20px"
                            checked-color="#273458"
                            :name="item.dictValue"
                          />
                        </template>
                      </van-cell>
                    </van-cell-group>
                  </van-radio-group>
                </template>
                <template v-if="item.type != 2">
                  <div class="upgrade-title">Recommended AD</div>
                  <van-radio-group v-model="recommendedRadio">
                    <van-cell-group>
                      <van-cell
                        class="state-cell"
                        v-for="item in gainCustomersList"
                        clickable
                        :key="item.dictValue"
                        :title="item.dictLabel"
                        @click="recommendedRadio = item.dictValue"
                      >
                        <template #right-icon>
                          <van-radio
                            icon-size="20px"
                            checked-color="#273458"
                            :name="item.dictValue"
                          />
                        </template>
                      </van-cell>
                    </van-cell-group>
                  </van-radio-group>
                </template>
                <div class="price-box">价格{{ draftMoney }}</div>
                <div class="ok-btn" @click="handleUpgrade">OK</div>
              </div>
              <div class="qes-box">
                <img
                  @click.stop="showUpgradeQuestionPopup"
                  class="ques-img"
                  src="../../assets/images/myAds/ques-icon.png"
                  alt=""
                />
              </div>
            </div>
            <div class="release-box">
              <div
                class="release-btn"
                @click="showReleasePopup(item.advertisementId)"
              >
                <!-- 发布广告 -->
                Post AD
              </div>
            </div>
            <div class="rg-box1">
              <div class="rg-box1-flex" @click="deleteAd(item, index)">
                <div>delete</div>
                <img
                  class="delete-img"
                  src="../../assets/images/myAds/delete.png"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑信息弹窗 -->
    <van-popup v-model="showMsg">
      <div class="msgPopup-box">
        <div class="popup-head">New message</div>
        <img
          @click="showMsg = false"
          class="close-icon"
          src="../../assets/images/close-icon.png"
          alt=""
        />
        <div class="content">
          <van-field
            class="textareaIpt"
            v-model="remark"
            rows="7"
            type="textarea"
            placeholder="This message will pop up when the user views the advertisement
                  details."
          />
        </div>
        <div class="confirm-btn" @click="handleEditMsg">confirm</div>
      </div>
    </van-popup>

    <!-- 信息疑问号弹窗 -->
    <van-popup v-model="showMsgQuestion">
      <div class="questionPopup-box">
        <img
          @click="showMsgQuestion = false"
          class="close-icon"
          src="../../assets/images/close-icon.png"
          alt=""
        />
        <div class="content">
          {{ messagePrompt }}
        </div>
        <div class="confirm-btn" @click="showMsgQuestion = false">confirm</div>
      </div>
    </van-popup>

    <!-- 升级疑问号弹窗 -->
    <van-popup v-model="showUpgradeQuestion">
      <div class="questionPopup-box">
        <img
          @click="showUpgradeQuestion = false"
          class="close-icon"
          src="../../assets/images/close-icon.png"
          alt=""
        />
        <div class="content">
          {{ upgradePrompt }}
        </div>
        <div class="confirm-btn" @click="showUpgradeQuestion = false">
          confirm
        </div>
      </div>
    </van-popup>

    <!-- Customers疑问号弹窗 -->
    <van-popup v-model="showCustomersQuestion">
      <div class="questionPopup-box">
        <img
          @click="showCustomersQuestion = false"
          class="close-icon"
          src="../../assets/images/close-icon.png"
          alt=""
        />
        <div class="content">
          {{ customerPrompt }}
        </div>
        <div class="confirm-btn" @click="showCustomersQuestion = false">
          confirm
        </div>
      </div>
    </van-popup>

    <van-popup v-model="showReleaseBox">
      <div class="questionPopup-box">
        <img
          @click="showReleaseBox = false"
          class="close-icon"
          src="../../assets/images/close-icon.png"
          alt=""
        />
        <div class="content">是否确认发布广告信息</div>
        <div class="confirm-btn" @click="handleRelease">confirm</div>
      </div>
    </van-popup>
    <router-view />
    <van-tabbar route active-color="#027AFC" inactive-color="#666666">
      <van-tabbar-item replace to="/vip">
        <span> {{ $t('vip') }} </span>
        <template #icon="props">
          <img :src="props.active ? icon.active1 : icon.inactive1" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/">
        <span> {{ $t('home') }} </span>
        <template #icon="props">
          <img :src="props.active ? icon.active2 : icon.inactive2" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/postAd">
        <span> {{ $t('post AD') }} </span>
        <template #icon="props">
          <img :src="props.active ? icon.active3 : icon.inactive3" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/myAD">
        <span> {{ $t('my AD') }} </span>
        <template #icon="props">
          <img :src="props.active ? icon.active4 : icon.inactive4" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/personal">
        <span> {{ $t('log in') }} </span>
        <template #icon="props">
          <img :src="props.active ? icon.active5 : icon.inactive5" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import {
  apiUpdateRemark,
  apiGetAdvertisingDraft,
  apiGetAdvertisingReleaseList,
  apiGetMessagePrompt,
  apiGetUpgradePrompt,
  apiGetCustomerPrompt,
  apiGetUpgradeSelect,
  apiAdvertisingRelease,
  apiGainCustomers,
  apiUpdateDraft,
  apiGetAdvertisementMoney,
  apiAdvertisingClassification,
  apiAdvertisingDelete,
} from '../../request/api'
export default {
  name: 'myAD',
  components: {},
  data() {
    return {
      active: 0,
      icon: {
        active1: require('../../assets/images/tabbar/tabbar1.png'),
        inactive1: require('../../assets/images/tabbar/tabbar2.png'),
        active2: require('../../assets/images/tabbar/tabbar3.png'),
        inactive2: require('../../assets/images/tabbar/tabbar4.png'),
        active3: require('../../assets/images/tabbar/tabbar5.png'),
        inactive3: require('../../assets/images/tabbar/tabbar6.png'),
        active4: require('../../assets/images/tabbar/tabbar7.png'),
        inactive4: require('../../assets/images/tabbar/tabbar8.png'),
        active5: require('../../assets/images/tabbar/tabbar9.png'),
        inactive5: require('../../assets/images/tabbar/tabbar10.png'),
      },
      mode: 1,
      showMsg: false,
      showMsgQuestion: false,
      showUpgradeQuestion: false,
      showCustomersQuestion: false,
      showReleaseBox: false,
      // 疑问号弹窗信息
      messagePrompt: '',
      upgradePrompt: '',
      customerPrompt: '',
      // 信息编辑数据
      remark: '',
      // 草稿列表
      draftList: [],
      // 发布列表
      releaseList: [],
      // 广告id
      advertisementId: '',
      // 升级下拉列表
      upgradeList: [],
      // 升级客户数下拉框分类
      gainCustomersList: [],
      customersChecked: -1,
      upgradeChecked: -1,
      customersRadio: '',
      type: '',
      topRadio: '',
      recommendedRadio: '',
      // 升级价钱计算
      draftMoney: '',
      classificationList: [],
    }
  },
  created() {
    let token = localStorage.getItem('key')
    if (!token) {
      this.$router.replace('/login')
    }
    // 获取发布列表 和 草稿列表
    this.getReleaseList()
    this.getDraftList()

    apiGetMessagePrompt().then((res) => {
      if (res.code == 200) {
        this.messagePrompt = res.data[0].dictLabel
      }
    })
    apiGetUpgradePrompt().then((res) => {
      if (res.code == 200) {
        this.upgradePrompt = res.data[0].dictLabel
      }
    })
    apiGetCustomerPrompt().then((res) => {
      if (res.code == 200) {
        this.customerPrompt = res.data[0].dictLabel
      }
    })
    // 升级下拉列表
    apiGetUpgradeSelect().then((res) => {
      if (res.code == 200) {
        this.upgradeList = res.data
      }
    })
    apiGainCustomers().then((res) => {
      if (res.code == 200) {
        this.gainCustomersList = res.data
      }
    })
    apiAdvertisingClassification().then((res) => {
      if (res.code == 200) {
        this.classificationList = res.data
        // console.log(this.classificationList);
      }
    })
  },
  mounted() {},
  methods: {
    // 点击广告 \ 草稿
    handleClickAD() {
      this.mode = 1
      this.upgradeChecked = -1
      this.topRadio = ''
      this.recommendedRadio = ''
      this.draftMoney = ''
      this.type = ''
    },
    handleClickDF() {
      this.mode = 2
      this.upgradeChecked = -1
      this.topRadio = ''
      this.recommendedRadio = ''
      this.draftMoney = ''
      this.type = ''
    },

    // 获取发布列表
    getReleaseList() {
      apiGetAdvertisingReleaseList().then((res) => {
        if (res.code == 200) {
          this.releaseList = res.data
        }
      })
    },
    // 获取草稿列表
    getDraftList() {
      apiGetAdvertisingDraft().then((res) => {
        if (res.code == 200) {
          this.draftList = res.data
        }
      })
    },
    showMsgPopup(id) {
      this.advertisementId = id
      this.showMsg = true
    },
    showMsgQuestionPopup() {
      this.showMsgQuestion = true
    },
    showUpgradeQuestionPopup() {
      this.showUpgradeQuestion = true
    },
    showCustomersQuestionPopup() {
      this.showCustomersQuestion = true
    },
    showReleasePopup(id) {
      this.advertisementId = id
      this.showReleaseBox = true
    },
    // 编辑信息
    handleEditMsg() {
      apiUpdateRemark({
        advertisementId: this.advertisementId,
        remark: this.remark,
      }).then((res) => {
        if (res.code == 200) {
          this.$toast.success(res.msg)
          this.showMsg = false
        }
      })
    },

    // Goto_detail
    Goto_detail(item) {
      this.$router.push({
        path: '/detail',
        query: {
          advertisementId: item.advertisementId,
          category: item.category,
        },
      })
    },

    // 草稿发布
    handleRelease() {
      apiAdvertisingRelease({
        advertisementId: this.advertisementId,
      }).then((res) => {
        if (res.code == 200) {
          this.$toast.success(res.msg)
          this.showReleaseBox = false
        } else {
          this.$toast.fail(res.msg)
        }
        this.getDraftList()
      })
    },

    // 控制CustomersSelect是否显示
    handleCustomersSelect(item, index) {
      this.advertisementId = item.advertisementId
      this.type = item.type
      if (this.customersChecked === index) {
        this.customersChecked = -1
      } else {
        this.customersChecked = index
      }
    },
    // 处理获取更多客户数
    handleCustomers() {
      apiUpdateDraft({
        advertisementId: this.advertisementId,
        type: this.type,
        perday: this.customersRadio,
      }).then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.customersChecked = -1
          this.$toast.success(res.msg)
        } else {
          this.$toast.fail(res.msg)
        }
        this.getReleaseList()
      })
    },

    // 控制UpgradeSelect是否显示
    handleUpgradeSelect(item, index) {
      this.advertisementId = item.advertisementId
      this.type = item.type
      apiGetAdvertisementMoney({
        advertisementId: this.advertisementId,
      }).then((res) => {
        if (res.code == 200) {
          this.draftMoney = res.data.advertisementMoney
        }
      })
      if (this.upgradeChecked === index) {
        this.upgradeChecked = -1
      } else {
        this.upgradeChecked = index
      }
    },

    // 处理升级
    handleUpgrade() {
      apiUpdateDraft({
        advertisementId: this.advertisementId,
        type: this.type,
        perday: `${this.topRadio},${this.recommendedRadio}`,
        draftMoney: this.draftMoney,
      }).then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.upgradeChecked = -1
          this.$toast.success(res.msg)
        } else {
          this.$toast.fail(res.msg)
        }
        this.getReleaseList()
        this.getDraftList()
      })
    },
    // 再次编辑
    goEdit(advertisementId) {
      this.$router.push({
        path: '/postAd',
        query: { advertisementId },
      })
    },
    translateDict(item) {
      let data =
        this.classificationList.filter((x) => x.dictValue === item)[0]
          .dictLabel ?? ''
      return data
    },
    deleteAd(item, index) {
      console.log(item, index, '======____------')
      apiAdvertisingDelete(item.advertisementId).then((res) => {
        if (res.code === 200) {
          this.$toast.success(res.msg)
        } else {
          this.$toast.fail(res.msg)
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.page {
  background: #ebebeb;
}

.content {
  margin-bottom: 120px;
}

.type-box {
  margin: 20px 0;
  display: flex;
  align-items: center;

  .type-box-item {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 84px;
    font-size: 28px;
    font-weight: 400;
    color: #273458;
    background: #fff;
  }

  .activeTypeBg {
    font-weight: bold;
    color: #ffffff;
    background: #273458;
  }
}

//
.active-adBox {
  padding-bottom: 1000px;

  .active-item {
    margin: 20px 0;
    background: #fff;
    padding: 18px 24px;
  }

  .item-head {
    margin-bottom: 13px;
    font-size: 24px;
    font-weight: 400;
    color: #232f3e;
  }

  .location-title {
    margin-right: 31px;
  }

  .show-box {
    margin-bottom: 23px;
    display: flex;
    align-items: center;
  }

  .show-box-item1 {
    width: 145px;
    height: 170px;
    margin-right: 12px;
  }

  .show-box-item1 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .show-box-item2 {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .rg-item1 {
    height: 50px;
    background: #273458;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 15px;
    box-sizing: border-box;
    margin-bottom: 10px;
  }

  .rg-item1-lf {
    font-size: 24px;
    font-weight: 400;
    color: #ffffff;
  }

  .rg-img1 {
    width: 19px;
    height: 19px;
  }

  .rg-item2 {
    height: 50px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 15px;
    box-sizing: border-box;
    border: 1px solid #c1c1c1;
    margin-bottom: 10px;
  }

  .rg-item2-lf {
    font-size: 24px;
    font-weight: 400;
    color: #273458;
  }

  .rg-img2 {
    width: 25px;
    height: 15px;
  }

  .rg-item3 {
    height: 50px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 15px;
    box-sizing: border-box;
    border: 1px solid #c1c1c1;
    position: relative;
  }

  .qes-box {
    position: absolute;
    right: -15px;
    top: -15px;
  }

  .ques-img {
    height: 33px;
    width: 33px;
  }

  .rg-item3-lf {
    font-size: 24px;
    font-weight: 400;
    color: #273458;
  }

  .rg-img3 {
    width: 21.33px;
    height: 18.67px;
  }

  .upgrade-box {
    // display: flex;
  }

  .upgrade-lf-item {
    width: 351px;
    height: 120px;
    border: 1px solid #c1c1c1;
    padding: 10px;
    box-sizing: border-box;
    font-size: 24px;
    font-weight: 400;
    color: #000000;
    margin-bottom: 10px;
  }

  .upgrade-rg {
    flex: 1;
  }

  .upgrade-small-box {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    /* 可选 */
  }

  .rg-box1 {
    width: 180px;
    height: 50px;
    border: 1px solid #c1c1c1;
    padding: 8px 16px;
    box-sizing: border-box;
    font-size: 24px;
    font-weight: 400;
    color: #000000;
    margin-bottom: 22px;
    position: relative;
  }

  .rg-box2 {
    width: 320px;
    height: 50px;
    border: 1px solid #c1c1c1;
    padding: 8px 16px;
    box-sizing: border-box;
    font-size: 24px;
    font-weight: 400;
    color: #000000;
    margin: 0px 15px;
    margin-bottom: 22px;
    position: relative;
  }

  .delete-img {
    width: 32px;
    height: auto;
  }

  .expire-time {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    div {
      margin: 5px;
      text-align: left;
    }
  }

  .rg-box1-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .upgrade-title {
    font-size: 24px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #000000;
    margin: 10px;
  }

  .rg-box-select {
    position: absolute;
    background: #fff;
    top: 50px;
    width: 257px;
    left: 0;
    right: 0;
    z-index: 1;
    box-shadow: 0px 3px 4px 1px rgba(41, 41, 41, 0.16);
  }

  .state-cell {
    box-sizing: border-box;
    padding: 20px 10px;
    overflow: hidden;
    font-size: 24px;
    font-weight: 400;
    color: #000000;
    align-items: center;
    width: 257px;
    justify-content: space-between;
  }

  .ok-btn {
    width: 227px;
    height: 40px;
    background: #273458;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
  }

  .bottom-img {
    width: 18px;
    height: 9.77px;
  }
}

//
.draft-adBox {
  padding-bottom: 1000px;

  .draft-item {
    margin: 20px 0;
    background: #fff;
    padding: 18px 24px;
  }

  .item-head {
    margin-bottom: 13px;
    font-size: 24px;
    font-weight: 400;
    color: #232f3e;
  }

  .location-title {
    margin-right: 31px;
  }

  .ad-fee {
    font-size: 24px;
    font-weight: bold;
    color: #000000;
  }

  .show-box {
    margin-bottom: 23px;
    display: flex;
    align-items: center;
  }

  .show-box-item1 {
    width: 145px;
    height: 170px;
    margin-right: 12px;
  }

  .show-box-item1 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .show-box-item2 {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .rg-item1 {
    height: 50px;
    background: #273458;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 15px;
    box-sizing: border-box;
    margin-bottom: 10px;
  }

  .rg-item1-lf {
    font-size: 24px;
    font-weight: 400;
    color: #ffffff;
  }

  .rg-img1 {
    width: 19px;
    height: 19px;
  }

  .rg-item2 {
    height: 50px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 15px;
    box-sizing: border-box;
    border: 1px solid #c1c1c1;
    margin-bottom: 10px;
  }

  .rg-item2-lf {
    font-size: 24px;
    font-weight: 400;
    color: #273458;
  }

  .rg-img2 {
    width: 25px;
    height: 15px;
  }

  .rg-item3 {
    height: 50px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 15px;
    box-sizing: border-box;
    border: 1px solid #c1c1c1;
    position: relative;
  }

  .qes-box {
    position: absolute;
    right: -15px;
    top: -15px;
  }

  .ques-img {
    height: 33px;
    width: 33px;
  }

  .rg-item3-lf {
    font-size: 24px;
    font-weight: 400;
    color: #273458;
  }

  .rg-img3 {
    width: 21.33px;
    height: 18.67px;
  }

  .release-box {
    // margin: 30px 0 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .release-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: 400;
    color: #fff;
    width: 257px;
    height: 50px;
    border: 1px solid #273458;
    padding: 8px 16px;
    box-sizing: border-box;
    margin-right: 20px;
    background: #273458;
  }

  .rg-box1 {
    width: 200px;
    height: 50px;
    border: 1px solid #c1c1c1;
    padding: 8px 16px;
    box-sizing: border-box;

    font-size: 24px;
    font-weight: 400;
    color: #000000;
    position: relative;
  }

  .rg-box1-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .upgrade-title {
    font-size: 24px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #000000;
    margin: 10px;
  }

  .rg-box-select {
    position: absolute;
    background: #fff;
    top: 50px;
    width: 257px;
    left: 0;
    right: 0;
    z-index: 1;
    box-shadow: 0px 3px 4px 1px rgba(41, 41, 41, 0.16);
  }

  .state-cell {
    box-sizing: border-box;
    padding: 20px 10px;
    overflow: hidden;
    font-size: 24px;
    font-weight: 400;
    color: #000000;
    align-items: center;
    width: 257px;
    justify-content: space-between;
  }

  .ok-btn {
    width: 227px;
    height: 40px;
    background: #273458;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
  }

  .bottom-img {
    width: 18px;
    height: 9.77px;
  }
  .upgrade-small-box1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: centerS;
  }
  .delete-img {
    width: 32px;
    height: auto;
  }
}

// 编辑消息样式
.msgPopup-box {
  width: 567px;
  background: #ffffff;

  .popup-head {
    height: 80px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 400;
    color: #232f3e;
    border-bottom: 1px solid #707070;
  }

  .close-icon {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 35px;
    height: 35px;
  }

  .content {
    margin: 21px 35px;
    padding: 15px;
    height: 247px;
    background: #ffffff;
    border: 1px solid #c0c0c0;
    font-size: 22px;
    font-weight: 400;
    color: #000000;
  }

  .confirm-btn {
    margin: 21px 35px 35px;
    height: 70px;
    width: 498px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #ffffff;
    background: #273458;
    box-shadow: 0px 3px 12px 1px rgba(71, 71, 71, 0.16);
  }
}

// 问号弹窗
.questionPopup-box {
  width: 567px;
  background: #ffffff;

  .close-icon {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 35px;
    height: 35px;
  }

  .content {
    margin: 21px 35px;
    padding: 15px;
    height: 247px;
    background: #ffffff;
    font-size: 26px;
    font-weight: 400;
    color: #232f3e;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .textareaIpt {
    height: 110px !important;
  }

  .confirm-btn {
    margin: 21px 35px 35px;
    height: 70px;
    width: 498px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #ffffff;
    background: #273458;
    box-shadow: 0px 3px 12px 1px rgba(71, 71, 71, 0.16);
  }
}

.price-box {
  text-align: center;
  margin: 15px 0;
  font-weight: bold;
}
</style>
